<script setup lang="ts">
import {computed, nextTick, ref} from 'vue'
import {updateUnit} from "@/apis/zyj/units"
import {
  ElButton,
  ElDialog,
  ElForm,
  ElFormItem,
  ElInput,
  ElInputNumber,
  ElMessage,
  ElOption,
  ElRadio,
  ElRadioGroup,
  ElSelect
} from 'element-plus'

const ruleFormRef = ref();
const props = defineProps({
  allUnits: Array,
  updateDialog: Boolean,
  form: Object
})
const mainUnits = computed(() => props.allUnits);
const emit = defineEmits(['close-dialog'])

const handleConfirm = (value) => {
  value.validate(valid => {
    if (valid) {
      console.log(props.form)
      updateUnit(props.form).then(req => {
        console.log(req)
        if (req === '成功') {
          ElMessage.success('修改成功')
        } else {
          ElMessage.error('修改失败')
        }
        handleCancel()
      })
    } else ElMessage.error('请填写完整信息');
  });
}

const handleCancel = () => {
  emit('close-dialog')
}
// 打开弹窗时清空校验
const handleOpenCardDialog = () => {
  nextTick(() => {
    // 清空校验
    ruleFormRef.value.clearValidate()
  })
}
//校验
const rules = {
  unit: [
    {required: true, message: "单位不能为空", trigger: "blur"},
  ],
  unitName: [
    {required: true, message: "单位名称不能为空", trigger: "blur"},
  ],
  isPrimaryUnit: [
    {required: true, message: "是否是主单位不能为空", trigger: "blur"},
  ],
};
</script>

<template>
  <ElDialog
      v-model="props.updateDialog"
      title="修改单位"
      width="30%"
      :before-close="handleCancel"
      @open="handleOpenCardDialog"
  >
    <ElForm :model="props.form" :rules="rules" label-width="140px" ref="ruleFormRef">
      <ElFormItem label="单位编码" prop="unit">
        <ElInput v-model="form.unit"/>
      </ElFormItem>
      <ElFormItem label="单位名称" prop="unitName">
        <ElInput v-model="form.unitName"/>
      </ElFormItem>
      <ElFormItem label="是否是主单位" prop="isPrimaryUnit">
        <ElRadioGroup v-model="form.isPrimaryUnit">
          <ElRadio label="是" value="0">是</ElRadio>
          <ElRadio label="否" value="1">否</ElRadio>
        </ElRadioGroup>
      </ElFormItem>
      <div v-if="form.isPrimaryUnit === '1'">
        <ElFormItem label="主单位">
          <ElSelect v-model="form.primaryUnitId" placeholder="请选择主单位">
            <ElOption
                v-for="unit in mainUnits"
                :key="unit.id"
                :label="unit.unitName"
                :value="unit.id"
            />
          </ElSelect>
        </ElFormItem>
        <ElFormItem label="与主单位换算比例">
          <ElInputNumber v-model="form.conversionRatio" :min="0" :step="1"/>
        </ElFormItem>
      </div>
      <ElFormItem label="是否启用" required>
        <ElRadioGroup v-model="form.isEnabled">
          <ElRadio label="是" value="0">是</ElRadio>
          <ElRadio label="否" value="1">否</ElRadio>
        </ElRadioGroup>
      </ElFormItem>
      <ElFormItem label="备注">
        <ElInput
            v-model="form.remarks"
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
        />
      </ElFormItem>
    </ElForm>
    <template #footer>
      <span class="dialog-footer">
        <ElButton @click="handleCancel">取消</ElButton>
        <ElButton type="primary" @click="handleConfirm(ruleFormRef)">
          确定
        </ElButton>
      </span>
    </template>
  </ElDialog>
</template>

<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>